1 每个页面公共css在app.vue中引入

2 pages.json配置页面路由、导航条、选项卡等页面类信息
"pages"数组设定跳转页面
"tabBar"设置底部导航栏
这两个结合起来实现页面跳转

3 图片一定要设置高度 宽度设置为100%
图片mode方式主要有 widthFix/aspectFill

4 uniapp中v-for标签用blcok

5 全局注册组件main.js中
import divider from './components/common/divider.vue'
// 引入全局组件
Vue.component('divider', divider)

6 animated动画库使用
全局引入动画库
class=“animated faster”
hover-class=”动画名”
hover-class是点击触发的

7 提示框显示
uni.showToast({title:'关注成功'})

8 子组件传值
子组件this.$emit('follow',this.index)
父组件 @follow="changeFollow"
@后的follow是子组件传过来的changeFollow是自定义的函数

9 子组件同时传两个值
doSupport(type) {
				this.$emit('doSupport',{
					type:type,
					index:this.index
				})
			},
父组件接收并处理
changeSupport(e) {
				this.list[e.index].support.type = e.type
				this.list[e.index].support[e.type+'_count'] ++
			}

10 顶部滚动选项卡
scroll-row宽度100% 不要换行 scroll-into-view 会滚动到指定元素
scrollInto要和id一致
		<scroll-view scroll-x 
		class="scroll-row" 
		:scroll-into-view='scrollInto' 
		scroll-with-animation>
			<view 
			v-for="(item,index) in tabList" 
			:key="index"
			:id="'tab'+index"
			>{{item.name}}</view>
		</scroll-view>

11 将rpx转化为px
uni.upx2px()

12 uni.getSystemInfo 获取的 res.windowHeight 是屏幕高度除去顶部搜索栏和底部选项卡后的高度

13 @scrolltolower 滚动到底部/右边，会触发 scrolltolower 事件

14 监听点击导航栏搜索框   onNavigationBarSearchInputClicked

15 导航栏 "titleNView" 中disabled是true 只能跳转不能编辑
去掉disabled 可以编辑

16 v-if 和 v-else 应该用template标签包裹
	<template v-if="item.list.length">
		...
	</template>
	<template v-else>
		...
	</template>

17 监听导航输入数据 
	onNavigationBarSearchInputChanged(e){}
	监听导航栏按下事件
	onNavigationBarButtonTap(e){}
	隐藏键盘
	uni.hideKeyboard()
	uni.showLoading({
		title:'加载中...'
	})
	setTimeout(() => {
		uni.hideLoading()
	}, 2000)

	18 网页跳转 新建页面一定要在pages中添加 否则无法跳转
	uni.navigateTo({
				url: '../search/search',
			});

18 新建的页面都要在pages.json 中的pages加入进去才能显示

19 自定义导航栏 先取消自带的导航栏
"path" : "pages/addInput/addInput",
		    "style" :{
				"app-plus":{
					// 取消原生导航
					"titleNView":false
				}
		    }
再引入导航组件

20 uni.showModal 表示交互反馈 确认是否删除
uni.showModal({
    title: '提示',
    content: '这是一个模态弹窗',
    success: res => {
        if (res.confirm) {
            console.log('用户点击确定');
        } else if (res.cancel) {
            console.log('用户点击取消');
        }
    }
});

21 关闭当前页面，返回上一页面或多级页面
uni.navigateBack()

22 自定义导航栏返回
@click-left="goBack"
goBack(){
	uni.navigateBack({ delta: 1 });
},

23 添加图片组件 upload-image 在页面启动时读取本地数据要用 created() {}
和视频中的onReady() {}不同

24 计算动态页高度
uni.getSystemInfo({
				success: res => {
					this.scrollH = res.windowHeight - res.statusBarHeight - 44
				}
			})

25 在<script>标签下定义的数据
需要在onLoad()中调用赋值才可以使用

26 topicList中点击任一个item， 可通过如下方式传值
open() {
	uni.navigateTo({
		url:'../../pages/topicDetail/topicDetail?detail=' + JSON.stringify(this.item)
	})
}
打开的组件接收如下：
onLoad(e) {
	if (e.detail) {
		let res = JSON.parse(e.detail)
		console.log(res)
	}
}
27 上拉加载更多
// 触底触发
onReachBottom() {
	console.log('上拉加载更多')
},

28 让文字在一行显示 多余的省略
class 加上 text-ellipsis
即 text-ellipsis {
	/* #ifndef APP-PLUS-NVUE */
	overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
	/* #endif */
	/* #ifdef APP-PLUS-NVUE */
	lines: 1;
	/* #endif */
}
且设置最大宽度即可

29 下拉刷新功能
要在pages.json 中设置
"enablePullDownRefresh":true
监听下拉刷新
onPullDownRefresh

30 监听点击原生导航栏按钮
onNavigationBarButtonTap(e) {}

31 获取当前时间戳
(new Date()).getTime()

32 input 输入框属性 输入时页面不会被键盘往上顶
:adjust-position="false"
input 输入框增加confirm   在手机键盘上点击换行就可以直接发送
@confirm="submit"

33 不同的地方搜索用同一个搜索模块 通过增加type的方式进行区分
uni.navigateTo({
	url:'../search/search?type=user'
})

在搜索模块中可得到不同的type值
onLoad(e) {
	console.log(e.type)
}

34 修改原生搜索导航栏文字
定义pageTitle
如果是app端
// #ifdef APP-PLUS
let currentWebview = this.$mp.page.$getAppWebview();
let tn = currentWebview.getStyle().titleNView; 
tn.searchInput.placeholder = '搜索'+pageTitle; 
currentWebview.setStyle({
	titleNView: tn  
})
// #endif

35 导航右侧字体显示不全
在buttons列表中加入"width":"auto"

36 修改标题
uni.setNavigationBarTitle({
	title:data.title
})

37 map 函数功能 返回一个新数组
imgList() {
	// map返回一个新数组
	return this.info.img.map(item => item.src)
}

38 预览图片
current: index 是图片的索引 点击哪张图片就显示哪张图片
urls后面接的是图片地址的数组形式
preview(index) {
	uni.previewImage({
		current: index,
		urls: this.imgList
	});
}

39 评论样式在uni.css 中有
uni-comment-list

40 分享功能需要使用api中自带的方法 已经做了兼容性处理
uni.getProvider 这个功能是组件
要用created生命周期才可以调用
仅在app端生效

41 uni.navigateTo 不跳转页面 要用绝对路径
uni.navigateTo({
	url:'/pages/user-set/user-set'
})

42 uniapp 中使用子组件调用@click注意与vue不同
需要在子组件内部定义如下，否则无法使用
@click="onClick"
onClick() {
	this.$emit('click')
},

43 使用uniapp原生导航方式，且需添加success、fail、以及complete方法即可
uni.navigateTo({
url:'/xxxx/xxxx/xx',
success: res => {},fail: () => {},complete: () => {}
})

44 uniapp官网API，界面，交互反馈，uni.showActionSheet()
可以作为弹出选项

45 日期选择器
uniapp官网组件，表单组件，picker

46 城市选择
<mpvue-city-picker :themeColor="themeColor" ref="mpvueCityPicker" 
:pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm">
</mpvue-city-picker>

import mpvueCityPicker from '@/components/uni-ui/mpvue-citypicker/mpvueCityPicker.vue';

themeColor: '#007AFF',
cityPickerValueDefault: [0, 0, 1],
pickerText: '湖南省-长沙市-岳麓区',

47 折叠面板
在uniapp模板文件中

48 定时器写法 注意记得写1000 否则不会触发
let timer = setInterval(() => {
	if (this.codeTime >= 1) {
		this.codeTime --
	} else {
		this.codeTime = 0
		clearInterval(timer)
	}
},1000)

43 第三方登陆在模板文件pages/api/login中
uni.getProvider 引用要在created和mounted

44 清除缓存 api - 数据缓存
// 清除缓存
uni.clearStorageSync()
// 获取缓存
uni.getStorageInfoSync()

45 全局挂载权限验证跳转
Vue.prototype.navigateTo
代码中只需将uni.navigateTo 改为 this.navigateTo

46 uniapp请求数据
uni.request({
    url: 'https://www.example.com/request', //仅为示例，并非真实接口地址。
    data: {
        text: 'uni.request'
    },
    header: {
        'custom-header': 'hello' //自定义请求头信息
    },
    success: (res) => {
        console.log(res.data);
        this.text = 'request success';
    }
});

47 开启下拉刷新
pages/json 中style下
"enablePullDownRefresh":true,

在组件中
// 监听下拉刷新事件
onPullDownRefresh() {
	
},

48 修改导航标题
uni.setNavigationBarTitle({
	title:xxxxx
})